<template>
	<view class="popup" v-if="isShow">
		<view class="popup-box">
			<view class="popup-title">
				一键解绑
			</view>
			<view class="popup-form">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell" v-for="item in items" :key="item.value">
						<text>{{item.name}}</text>
						<view>
							<checkbox :value="item.value" color="#fff" style="transform:scale(0.8)"
								:checked="item.checked" />
						</view>
					</label>
				</checkbox-group>
				<button @click="submitWifi">确定解绑</button>
				<text @click="closeBtn" class="close">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "unbind",
		props: {
			eqId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isShow: false,
				items: [
					// {
					// 	value: '0',
					// 	name: 'wifi解绑',
					// 	checked: false
					// },
					{
						value: '1',
						name: '项目解绑',
						checked: false
					}
				],
				selectData:[]
			};
		},
		mounted() {

		},
		methods: {
			openModel() {
				this.isShow = true
			},
			checkboxChange: function(e) {
				console.log(e.detail.value)
				this.selectData = e.detail.value
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			async submitWifi() {
				if(this.selectData.length>0){
					if(this.selectData.includes('1')){
						let res = await this.http("put", "/tc/shebei", {
							id: this.eqId,
							shebeiProjectList: []
						})
						if (res.code == 200) {
							this.isShow = false
							this.$emit('bindChange')
						}
						this.toast(res.msg)
					}
					if(this.selectData.includes('0')){
						this.toast('解绑成功')
						this.isShow = false
					}
				}else{
					this.toast('请至少选择一个')
				}
			},
			closeBtn() {
				this.isShow = false
			}
		}
	}
</script>

<style lang="less">
	.uni-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 12upx;
		background: #F5F7F9;
		margin-bottom: 20upx;
		padding: 20upx 20upx;
		box-sizing: border-box;

		text {
			font-size: 30upx;
		}

		/deep/ uni-checkbox .uni-checkbox-input {
			border-radius: 50% !important;
		}

		/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
			background-color: #63ABFA;
		}
	}

	.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;

		.popup-box {
			width: 80%;
			border-radius: 32upx;
			background: linear-gradient(180deg, #CDDAF8 0%, #FFFFFF 23%);
			padding: 20upx 40upx;
			box-sizing: border-box;

			.popup-title {
				width: 100%;
				line-height: 72upx;
				text-align: center;
				padding-top: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #1A1A1A;
			}

			button {
				border-radius: 120upx;
				background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
				color: #fff;
				margin-top: 40upx;
				font-size: 32upx;
				line-height: 92upx;
			}

			.close {
				display: block;
				text-align: center;
				padding: 30upx 0;
			}
		}
	}
</style>